<template>
    <div>
        <div class="title">
            <van-icon name="arrow-left" @click="$router.go(-1)"/>
            <span>胖猫登录注册</span>
        </div>
        <input class="username" type="text" placeholder="用户名/邮箱/手机号" v-model="username">
        <div class="pwd">
            <input class="password" type="password" placeholder="请输入密码" v-model="password">
            <span>忘记密码</span>
        </div>
        <van-button type="danger" @click="login">登录</van-button>
        <div class="register" @click="toPage('register')">快速注册</div>
    </div>
</template>

<script>
    import { Toast } from 'vant'
    export default {
        name: "Login",
        data() {
            return {
                username: '',
                password: ''
            }
        },
        components: {
          [Toast.name]: Toast
        },
        methods: {
            async login() {
                // 登录函数
                const get1 = await this.$post('auth/login', {
                    username: this.username,
                    password: this.password
                })
                if (this.username == '' || this.password == '') return Toast('账号或密码为空，请输入')
                if (get1.data.errno != 0) {
                    Toast.fail(get1.data.errmsg);
                } else {
                    Toast.fail(get1.data.errmsg);
                    // 登录成功时，把返回的用户信息和token值等信息存在vuex和缓存中
                    sessionStorage.setItem('token', get1.data.data.token)
                    const userInfo = {
                        avatarUrl: get1.data.data.userInfo.avatar,
                        nickName: get1.data.data.userInfo.nickname
                    }  // 用户信息
                    localStorage.setItem('userInfo', JSON.stringify(userInfo))
                    this.$store.commit('addToken', get1.data.data.token)
                    this.$store.commit('addUserInfo', get1.data.data.userInfo)

                    const address = await this.$get('address/list')
                    this.$store.commit('saveAddress', address.data.data.list) // 收货地址
                    localStorage.setItem('address', JSON.stringify(address.data.data.list))
                    this.Collect()
                    this.$router.push({name: 'user'})
                }
            },
            toPage(name) {
                this.$router.push({name: 'register'})
            },
            async Collect() {
              console.log(this.$store.state.token)
              // 获取收藏列表
              const get1 = await this.$get('collect/list', {type: 0})
              console.log(get1.data.data.list)
              localStorage.setItem('collect', JSON.stringify(get1.data.data.list))
              this.$store.commit('addCollect', get1.data.data.list)
            }
        }
    }
</script>

<style lang="less" scoped>
  .title {
    position: relative;
    width: 375px;
    height: 45px;
    line-height: 45px;
    font-size: 18px;
    text-align: center;

    .van-icon-arrow-left {
      position: absolute;
      left: 0px;
      line-height: 45px;
      margin-left: 11px;
      font-size: 18px;
    }
  }

  .username {
    margin-left: 48px;
    margin-top: 37px;
    margin-bottom: 35px;
    width: 280px;
    height: 40px;
    border-radius: 20px;
    font-size: 14px;
    border: 1px solid #ccc;
  }

  .pwd {
    margin-bottom: 50px;

    .password {
      margin-left: 48px;
      width: 200px;
      height: 40px;
      font-size: 14px;
      border-radius: 20px;
      border: 1px solid #ccc;
    }

    > span {
      margin-left: 10px;
      font-size: 14px;
      color: #666666;
    }
  }

  .van-button--danger {
    margin-left: 68px;
    width: 240px;
    height: 45px;
    border-radius: 20px;
    background-color: #F60C00;
  }

  .register {
    margin-top: 50px;
    margin-right: 47px;
    font-size: 14px;
    color: #666666;
    text-align: right;
  }
</style>
